<template>
	<zkView ref="zkView" v-slot:uContainer>
		<view class="container">
			<view class="list" v-if="cartList.length>0">
				<checkbox-group ref="checkboxGroup" @change="checkboxChange">
					<uni-swipe-action ref="swipeAction">
						<view class="itemLabel" v-for="(item, index) in cartList" :key="item._id">
							<uni-swipe-action-item :right-options="options" @click="onActionClick($event,item)">
								<view class="itemContent">
									<block v-if="item.product_info">
										<label class="checkedRadio">
											<checkbox :checked="checkedIdList.includes(item._id)" :value="item._id" color="#016024"
												:disabled="item.product_info.status===-1" />
											<text v-if="item.product_info.status===-1">已失效</text>
										</label>
										<image class="thumb" mode="widthFix" :src="item.product_info.thumbs[0]||'/static/placeholder.png'">
										</image>
										<view class="right" v-if="item.spu_info">
											<view class="name" @click.stop="toDetail(item)">
												<text>{{item.product_info.name}}</text>
											</view>
											<view class="sub" @click.stop="openSpuPop(item)">
												<text>{{item.spu_info.name}}</text>
												<text>x{{item.count}}</text>
												<uni-icons type="right" size="28rpx"></uni-icons>
											</view>
											<view class="priceNum">
												<text>￥</text>
												<text>{{formatPrice(item.spu_info.price_sale)}}</text>
												<text>￥</text>
												<text>{{formatPrice(item.spu_info.price_original)}}</text>
											</view>
										</view>
									</block>
								</view>
							</uni-swipe-action-item>
						</view>
					</uni-swipe-action>
				</checkbox-group>

				<view class="noMore">
					<text>让家乡的味道飘向世界~</text>
				</view>

				<view class="settle">
					<label class="selAll">
						<checkbox-group @change="checkAllChange">
							<label>
								<checkbox :checked="checkedIdList.length===cartList.length" value="1" color="#016024" />
							</label>
						</checkbox-group>
						<view class="count">
							<text>全选</text>
							<text>(已选{{checkedIdList.length}}件)</text>
						</view>
					</label>
					<view class="settleMidd">
						<view class="price">
							<text>需支付：</text>
							<text>￥</text>
							<rich-text :nodes="formatPrice(priceDetail.needMoney,2)" />
						</view>
						<view class="discount">
							<text>共减￥{{formatPrice(priceDetail.totalDiscount)}}</text>
						</view>
					</view>
					<view class="settleRight" @click="forBooking()">
						<text>结算</text>
					</view>
				</view>
			</view>
			<view class="noData" v-else>
				<image mode="widthFix" src="/static/empty.png"></image>
				<text>暂无商品</text>
			</view>
		</view>
	</zkView>
	<spuPopup ref="spuRef" @popupChange="popupChange" @popupCartBooking="bookingCart" @popupCartUp="upCart" />
	<zkTabbar pageIndex="1" />
</template>

<script>
	import indexJs from './index.js';
	import mixins from '@/common/mixins.js';
	import spuPopup from '@/components/spuPopup/spuPopup.vue';

	export default {
		components: {
			spuPopup
		},
		mixins: [mixins],
		...indexJs
	};
</script>

<style lang="scss" scoped>
	@import './index.scss';
</style>